<template>
    <transition name="move">
        <div class="mineTicketDetail" v-show="ticketDetailFlag">
            <m-title :title="title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <div class="mine-ticket-detail-container">
                <div class="input-name">
                    <span class="text">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                    <span class="name">{{ticketDetailList.truename}}</span>
                </div>
                <div class="input-name">
                    <span class="text">活动名称：</span>
                    <span class="name">{{ticketDetailList.title}}</span>
                </div>
                <div class="input-name">
                    <span class="text">截止日期：</span>
                    <span class="name">{{ticketDetailList.startdate}} 至 {{ticketDetailList.enddate}}</span>
                </div>
                <div class="input-name">
                    <span class="text">票&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
                    <span class="name">{{ticketDetailList.signcode}}</span>
                </div>
                <div class="input-img">
                    <img src="http://www.banmago.cn/qunyiguan/images/quchangquan.png" alt="" />
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/javascript">
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'

    export default {
        props: {
            ticketDetailList: {
                type: Object
            }
        },
        data () {
            return {
                title: '门票详情',
                ticketDetailFlag: false,
                returnShow: true,
                ticketList: []
            }
        },
        methods: {
            show () {
                this.ticketDetailFlag = true
            },
            hide () {
                this.ticketDetailFlag = false
            }
        },
        components: {MTitle,Loading,Scroll},
        created() {
            
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .mineTicketDetail
        background: #f0eff5
        width: 100%
        height: 100%
        position: fixed
        overflow: hidden
        top: 0
        left: 0
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .mine-ticket-detail-container
            position: absolute
            top: 56px
            width: 100%
            left: 0
            bottom: 0
            background: #fff
            padding: 10px 20px 0
            box-sizing: border-box
            .input-name
                display: flex
                height: 40px
                align-items: center
                .text
                    flex: 0 0 70px
                    width: 70px
                    font-size: 14px
                .name
                    flex: 1
                    font-size: 14px
                    line-height: 150%
            .input-img
                width: 201px
                margin: 10px auto
                img
                    width: 100%
                    

</style>